<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<div class="bj"></div>
<style>
    body {
        background-color: rgb(181, 173, 212);
    }
    
    .bj {
        position: absolute;
        z-index: -100;
        margin-top: auto;
    }
    
    .dh {
        width: 1000px;
        height: 20px;
        color: rgb(0, 0, 0);
        position: fixed;
        margin: 100px auto;
        top: -60px;
        left: 50px;
    }
    
    .aa {
        position: relative;
        top: 120px;
        left: 130px;
        transition: 3s;
        text-shadow: 5px 5px 5px #272d31;
        transition: all 3s;
        animation: move 3s 1.5s infinite alternate;
    }
    
    .aa:hover {
        transform: translate(0, 50px)scale(1, 1.5);
        animation: move 3s 1.5s infinite alternate;
    }
    
    .bb {
        position: relative;
        top: 300px;
        left: 1500px;
    }
    
    .tdjs {
        position: relative;
        top: 400px;
        left: 80px;
    }
    
    .w {
        position: relative;
        bottom: -410px;
        left: -40px;
        height: 350px;
        width: 350px;
        border-radius: 50%;
        margin: 100px auto;
        overflow: hidden;
        border: 1px solid rgb(253, 175, 175);
    }
    
    .w img {
        width: 350px;
        height: 350px;
        transition: all 1.5s;
    }
    
    .w img:hover {
        box-shadow: 1 1 10px rgb(207, 111, 111);
        transform: scale(1.5);
        transform: rotate(360deg);
    }
    
    .l {
        position: relative;
        bottom: 40px;
        left: -660px;
        height: 350px;
        width: 350px;
        border-radius: 50%;
        margin: 100px auto;
        overflow: hidden;
        border: 1px solid rgb(253, 175, 175);
    }
    
    .l img {
        width: 350px;
        height: 350px;
        transition: all 1.5s;
    }
    
    .l img:hover {
        box-shadow: 1 1 10px rgb(207, 111, 111);
        transform: scale(1.5);
        transform: rotate(360deg);
    }
    
    .wcm {
        position: relative;
        bottom: 490px;
        left: 560px;
        height: 350px;
        width: 350px;
        border-radius: 50%;
        margin: 100px auto;
        overflow: hidden;
        border: 1px solid rgb(253, 175, 175);
    }
    
    .wcm img {
        width: 350px;
        height: 350px;
        transition: all 1.5s;
    }
    
    .wcm img:hover {
        box-shadow: 1 1 10px rgb(207, 111, 111);
        transform: scale(1.5);
        transform: rotate(360deg);
    }
    
    .wsqq {
        position: relative;
        top: -750px;
        left: 760px;
        color: rgb(255, 255, 255);
        font-size: 25px;
    }
    
    .lstt {
        position: relative;
        top: -520px;
        left: 120px;
        color: rgb(255, 255, 255);
        font-size: 25px;
    }
    
    .wcmm {
        position: relative;
        top: -978px;
        left: 1380px;
        color: rgb(255, 255, 255);
        font-size: 25px;
    }
    
    .kou {
        width: 5px;
        height: 5px;
        position: absolute;
        top: 30px;
        left: 760px;
    }
    
    .kou h3 {
        position: absolute;
        top: -10px;
        left: 90px;
    }
    
    .kou:hover {
        transform: scale(1.2);
        transition: all 0.5s;
    }
    
    .zuihou {
        background-color: rgb(142, 92, 189);
        color: rgb(0, 0, 0);
        width: 3050px;
        height: 80px;
        position: absolute;
        top: 3800px;
    }
    /* .zp {
        position: absolute;
        top: 1800px;
        left: 100px;
    } */
    
    .work1 {
        position: absolute;
        top: 2100px;
        left: 150px;
    }
    
    .work2 {
        position: absolute;
        top: 1750px;
        left: 750px;
    }
    
    .work3 {
        position: absolute;
        top: 2100px;
        left: 1350px;
    }
    
    .work5 {
        position: absolute;
        top: 2450px;
        left: 750px;
    }
    
    .work {
        position: absolute;
        top: 2120px;
        left: 850px;
    }
    
    .work p {
        line-height: 30px;
    }
    
    .d {
        position: relative;
        top: 400px;
        left: 60px;
    }
    
    .e {
        position: relative;
        ;
        top: 200px;
        left: 100px;
    }
    
    .g {
        position: relative;
        ;
        top: 400px;
        left: 150px;
    }
    
    .t {
        position: relative;
        ;
        top: 200px;
        left: 200px;
    }
    
    .zp img:hover {
        transform: scale(1.2);
        transition: all 1s;
    }
</style>

<body>
    <div class="dh"><a href="#" class="ti">团队介绍</a>
        <a href="#tuandui" class="ti">团队作品 </a>
        <a href="#" class="ti">联系方式</a></div>
    <div class="bj"><img src="bj.jpg" width="1900px" height="800px"></div>
    <div class="aa">
        </p><span style="font-size: 120px;color: rgb(72, 114, 151);">WELCOME TO HAHAHAH'S WORLD</span></div>

    <div class="bb">
        </p><span style="font-size: 80px;color: rgb(226, 203, 240);">let'go</span></div>

    </div>
    <div class="tdjs">
        </p><span style="font-size: 60px;color: rgb(255, 255, 255);">团队介绍</span></div>
    </div>

    <div class="w"> <img src="wsq.jpg" width="500px" height="500px" alt=""></div>
    <div class="l"> <img src="lst.jpg" width="500px" height="500px" alt=""></div>
    <div class="wcm"> <img src="wcm.jpg" width="500px" height="500px" alt=""></div>

    <div class="lstt">

        <p>姓名：雷淑婷 性别：女</p>
        <p>专业：艺术与科技</p>
        <p>爱好： 拍照 美食 </p>
        <a href=" http://lei-shuting.gitee.io/personal-website">了解她</a>
    </div>
    <div class="wsqq">

        <p>姓名：王诗琴 性别：女</p>
        <p>专业：艺术与科技</p>
        <p>爱好：画画 摄影 美食 旅游</p>
        <a href="http://wang-shiqin.gitee.io/personal-website">了解她</a>
    </div>

    <div class="wcmm">

        <p>姓名：王春梅 性别：女</p>
        <p>专业：艺术与科技</p>
        <p>爱好：画画 听音乐</p>
        <a href=" http://rs-direction.gitee.io/personal-website">了解她</a>
    </div>


    <div class="zp">
        <h1 id="tuandui"></h1>
        <img class="work1" src="表情包1.jpg" width="350px" height="350px" alt="">
        <img class="work2" src="表情包2.jpg" width="350px" height="350px" alt="">
        <img class="work3" src="表情包3.jpg" width="350px" height="350px" alt="">

        <img class="work5" src="表情包5.jpg" width="350px" height="400px" alt="">
        <img class="d" src="1.jpg" width="400px" height="600px" alt="">
        <img class="e" src="2.jpg" width="400px" height="600px" alt="">
        <img class="g" src="3.jpg" width="400px" height="600px" alt="">
        <img class="t" src="4.jpg" width="400px" height="600px" alt="">

    </div>

    <div class="work">
        <h2>我们的团队作品</h2>
        <h3>小甲的表情</h3>
        <p>我们团队里的作品集，穿山<br>甲的表情包，我们的技术还<br>有在提高，在我们大家的努<br>力下，我们的画画水平<br>和敲代码的水平将会越来越好。</p>

    </div>


    <div class="zuihou">
        <h2 id="lianxifangshi" class="lianxi">联系方式</h2>
        <div class="kou"><img src="qq.png" alt="" width="30px" height="30px">
            <h3> 2397975075@qq.com</h3>
        </div>
    </div>





    </div>



</body>

</html>